<template>
  <a-modal
    title="新增轮播图"
    :width="500"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form" class="formclass">
        <a-form-item
          label="标题"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-input placeholder="请输入标题" v-decorator="['Title', {rules: [{required: true, message: '请输入标题！'}]}]" />
        </a-form-item>

        <a-form-item
          label="内容来源"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
                <a-select allowClear placeholder="请选择内容来源"  v-decorator="['Source', {rules: [{required: true, message: '请选择内容来源'}]}]">
                  <a-select-option :value="1">内部</a-select-option>
                  <a-select-option :value="2">外部</a-select-option>
                </a-select>
        </a-form-item>
        
        <a-form-item
          v-if="form.getFieldValue('Source')  ===1"
          label="链接内容"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
                    <a-select allowClear placeholder="请选择"  v-decorator="['SourceType', {rules: [{required: true, message: '请选择'}]}]">
                      <a-select-option :value="1">文章</a-select-option>
                      <a-select-option :value="2">课程</a-select-option>
                    </a-select>
        </a-form-item>

        <a-form-item
          v-if="form.getFieldValue('Source')  ===1"
          label="课程或文章"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
                    <a-select v-if="form.getFieldValue('SourceType')  ===1" allowClear placeholder="请选择"  v-decorator="['ObjectId', {rules: [{required: true, message: '请选择'}]}]">
                      <a-select-option v-for="item in articleList"  :value="item.key" :key="item.key">{{item.value}}</a-select-option>
                    </a-select>
                    <a-select v-else allowClear placeholder="请选择"  v-decorator="['ObjectId', {rules: [{required: true, message: '请选择'}]}]">
                      <a-select-option v-for="item in classsubjects" :value="item.key" :key="item.key">{{item.value}}</a-select-option>
                    </a-select>
        </a-form-item>

        
        <a-form-item
          v-if="form.getFieldValue('Source')  ===2"
          label="链接内容"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-input placeholder="请输入链接内容" v-decorator="['HttpURL', {rules: [{required: true, message: '请输入链接内容！'}]}]" />
        </a-form-item>

        
        <a-form-item
          label="排序"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-input placeholder="请输入排序" type="number" v-decorator="['SortValue', {rules: [{required: false, message: '请输入排序！'}]}]" />
        </a-form-item>

        
        <a-form-item
          label="是否可见"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-radio-group v-decorator="['IsShow', {rules: [{required: false, message: '请选择是否可见！'}]}]">
            <a-radio :value="true">可见</a-radio>
            <a-radio :value="false">不可见</a-radio>
          </a-radio-group>
        </a-form-item>


        
        <a-form-item
          label="显示区域"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-checkbox-group :options="plainOptions" v-decorator="['ShowRange', {rules: [{required: false, message: '请选择显示区域！'}]}]" @change="oncheckboxChange" />
        </a-form-item>

        
        <a-form-item
                        label="上传图片"
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        has-feedback
                        >
                            <a-upload
                                name="avatar"
                                list-type="picture-card"
                                class="avatar-uploader"
                                :show-upload-list="false"
                                :before-upload="beforeUpload"
                            >
                                <img class="u-img" v-if="articleImage" :src="articleImage" alt="avatar" />
                                <div v-else>
                                    <a-icon :type="uploadloading ? 'loading' : 'plus'" />
                                    <div class="ant-upload-text">
                                        上传图片
                                    </div>
                                </div>
                            </a-upload>
                            <a-icon class="deleteimgicon" v-if="articleImage" @click="deleteImg" type="delete" />
                            <span>（大小不要超过1M）</span>
        </a-form-item>
        

      </a-form>

    </a-spin>
  </a-modal>
</template>

<script>
  import { slideshowAdd } from '@/api/modular/slideshow/slideshowApi';
  
  const plainOptions = [
    { label: '家长端', value: 1 },
    { label: '园务端', value: 2 },
  ];
  export default {
    
    data () {
      return {
        plainOptions,
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 18 }
        },
        visible: false,
        confirmLoading: false,
        form: this.$form.createForm(this),
        articleImage: '',
        articleFile: null,
        uploadloading: false,
        articleList: [],
        classsubjects: [],

      }
    },
    mounted(){
      
    },
    computed: {
      
    },
    methods: {
      // 初始化方法
      add (infos) {
        let articleInfos = infos.find(item => {return item.key === 1});
        let subjectsInfos = infos.find(item => {return item.key === 2});
        this.articleList = articleInfos.values;
        this.classsubjects = subjectsInfos.values;
        this.visible = true;
      },

      oncheckboxChange(){

      },
      
        async beforeUpload(file, fileList){
            console.log(file)
            this.articleFile = file;
            let src = await this.fileToBase64(file);
            this.articleImage = src;
        },
        fileToBase64(file){  
            return new Promise((resolve, reject) => {
                let reader = new FileReader();  
                reader.readAsDataURL(file);  
                reader.onload = function (e) {    
                    resolve(e.target.result)
                }
            })
            
        },
        deleteImg(){
            this.articleImage = '';
            this.articleFile = null;
        },

      handleSubmit () {
        const { form: { validateFields } } = this
        this.confirmLoading = true
        validateFields((errors, values) => {
          if (!errors) {
            if(values.SortValue < 0){this.$message.error('排序请填写大于0的整数'); return;}
            // values.SortValue = parseInt(values.SortValue) 
            values.ShowRange = values.ShowRange.join(',');
            var _form = new FormData();
            for (const key in values) {
              if (values.hasOwnProperty(key)) {
                _form.append(key, values[key])
              }
            }
            _form.append('ImageFile', this.articleFile)
            slideshowAdd(_form).then((res) => {
              if (res.success) {
                this.$message.success('新增成功')
                this.visible = false
                this.confirmLoading = false
                this.$emit('ok', values)
                this.form.resetFields()
                this.articleFile = null;
                this.articleImage = '';
              } else {
                this.$message.error('新增失败：' + res.message)
              }
            }).finally((res) => {
              this.confirmLoading = false
            })
          } else {
            this.confirmLoading = false
          }
        })
      },
      handleCancel () {
        this.form.resetFields()
                this.articleFile = null;
                this.articleImage = '';
        this.visible = false
      }
    }
  }
</script>
<style>
  .formclass{
    height: 500px;
    overflow-y: auto;
  }
  .u-img{
    display: inline-block;
    max-height: 120px;
  }
</style>
